<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" :title="type + '账单'"></xk-header>
		<view class="list">
			<view class="list-item-top">
				<image mode="aspectFill" class="dianfei" :src="(imgUrl+'/wx/dianfei.png')"
					v-if="type === '电费'"/>
				<image mode="aspectFill" class="dianfei" :src="(imgUrl+'/wx/water.png')"
					v-if="type === '水费'"/>
			</view>
			<view class="list-item item-border">
				<view>物业编号</view>
				<view>{{data.property_code}}</view>
			</view>
			<view class="list-item">
				<view>单位名称</view>
				<view>{{data.company_name}}</view>
			</view>
			<!-- <view class="list-item">
				<view>租用面积</view>
				<view>200㎡</view>
			</view> -->
			<view class="list-item">
				<view>{{typeName}}表号</view>
				<view>{{data.table_no}}</view>
			</view>
			<view class="list-item">
				<view>上月{{typeName}}表读数</view>
				<view>{{data.last_month_read}}</view>
			</view>
			<view class="list-item">
				<view>本月{{typeName}}表读数</view>
				<view>{{data.month_read}}</view>
			</view>
			<view class="list-item">
				<view>本月用{{typeName}}量(度)</view>
				<view>{{data.month_dosage}}</view>
			</view>
			<view class="list-item">
				<view>本月{{typeName}}费(元)</view>
				<view v-if="typeName === '水'" class="title1">{{data.month_water_money | formatMoney}}</view>
				<view v-else class="title1">{{data.month_electricity_money | formatMoney}}</view>
				
			</view>

		</view>
	</view>
</template>
<script>

	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				type: "",
				typeName: "",
				data: {},

			};
		},
		onLoad(options) {
			if (options && options.type) {
				this.type = options.type
			}

			if (options && options.data) {
				if (this.type === '水费') {
					this.typeName = "水"
					this.data = JSON.parse(options.data)
					for (let item in this.data.piPayNoticeHydropowerWaterdets[0]) {
						this.data[item] = this.data.piPayNoticeHydropowerWaterdets[0][item]
					}
				} else {
					this.typeName = "电"
					this.data = JSON.parse(options.data)
					for (let item in this.data.piPayNoticeHydropowerElectricdets[0]) {
						this.data[item] = this.data.piPayNoticeHydropowerElectricdets[0][item]
					}
				}
				console.warn("data: ", this.data)
			}

		},
		methods:{
		}
	}
</script>

<style lang="scss">
.list {
	margin: 90rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.list-item-top {
		display: flex;
		justify-content: center;
		height: 50rpx;

		.dianfei {
			width: 140rpx;
			height: 140rpx;
			margin-top: -60rpx;
		}
	}
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		:first-child {
			flex: 1;
		}
		.title1 {
			color: #FF3737;
			font-weight: bold;
		}
	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
}

</style>
